* {
	margin: 0;
}

header {
	width: 100%;
	height: 54px;
	line-height: 54px;
	text-align: center;
	color: #214B9F;
	font-size: 20px;
	background-color: rgba(0, 0, 0, .4);
	.back {
		position: absolute;
		left: 10px;
		color: #333;
		font-size: 16px;
	}
}

.mine-no-login {
	width: 100%;
	height: 160px;
	background-color: #cacaca;
	.portrait {
		width: 80px;
		height: 80px;
		margin: 0 auto;
		position: relative;
		top: 15px;
		background-image: url(../images/icon1@2x.png);
		background-size: 600%;
		background-position: 0 -286px;
	}
	.login-box {
		display: flex;
		justify-content: space-around;
		width: 100px;
		margin: 25px auto;
		text-align: center;
		font-size: 16px;
		color: #666;
	}
}

.mine {
	.mine-head {
		position: relative;
		height: 84px;
		line-height: 100px;
		padding: 0 20px;
		font-size: 16px;
		color: #666;
	}
	.look-all-orders {
		position: absolute;
		right: 20px;
		bottom: 20px;
		line-height: 20px;
		font-size: 14px;
		color: #a8a8a8;
	}
	.orders-sort {
		border-bottom: 1px #dbdbdb solid;
		border-top: 1px #dbdbdb solid;
		height: 84px;
		ul {
			padding: 0 30px;
			list-style: none;
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			color: #a8a8a8;
			li {
				position: relative;
				width: 40px;
				height: 60px;
				margin: 10px 0;
				text-align: center;
				line-height: 100px;
			}
		}
		.icon {
			width: 28px;
			height: 24px;
			position: absolute;
			display: inline-block;
			left: 6px;
			top: 10px;
			background-image: url(../images/icon1@2x.png);
			background-size: 1800%;
		}
		.payment-icon {
			background-position: 0 -101px;
		}
		.shipment-icon {
			background-position: -50px -101px;
		}
		.receive-icon {
			background-position: -100px -101px;
		}
		.evaluate-icon {
			background-position: -150px -101px;
		}
	}
	.mine-something {
		height: 100px;
		ul {
			list-style: none;
			padding: 0 30px;
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			color: #214b9f;
			li {
				position: relative;
				width: 50px;
				height: 60px;
				margin: 10px 0;
				text-align: center;
				line-height: 100px;
			}
		}
		.icon {
			width: 28px;
			height: 27px;
			position: absolute;
			display: inline-block;
			left: 11px;
			top: 10px;
			background-image: url(../images/icon1@2x.png);
			background-size: 1800%;
		}
		.receive-address-icon{
			background-position: -253px -50px;
		}
		.personal-information-icon{
			background-position: -303px -50px;
		}
		.account-setting-icon{
			background-position: -353px -50px;
		}
	}
}

.nav {
	width: 100%;
	height: 50px;
	background-color: #214B9F;
	position: fixed;
	bottom: 0px;
	ul {
		display: flex;
		justify-content: space-around;
		list-style: none;
		padding: 0;
		li {
			width: 40px;
			height: 42px;
			margin: 4px auto;
			font-size: 10px; // color: #fff;
			color: #cacaca;
			text-align: center;
			i {
				display: inline-block;
				width: 40px;
				height: 28px;
				margin-bottom: -4px;
				background-image: url(../images/icon1@2x.png);
				background-size: 1300%;
			}
			.icon-home {
				background-position: -1px 0;
			}
			.icon-commodity {
				background-position: -51px 0;
			}
			.icon-trolly {
				background-position: -103px 0;
			}
			.icon-my {
				background-position: -364px 0;
			}
		}
	}
}
